<template>
  <view class="selects">
    <view class="title"> 请选择您的身份 </view>
    <view class="options">
      <view class="opt">
        <view class="left">
          <view class="top"> 我是出借人 </view>
          <view class="bottom-btn"> 创建借条 </view>
        </view>
        <view class="right-icon"></view>
      </view>
      <view class="opt out">
        <view class="left">
          <view class="top"> 我是借款人 </view>
          <view class="bottom-btn second"> 创建借条 </view>
        </view>
        <view class="right-icon out"></view>
      </view>
    </view>
    <view class="warnning">
      <view class="left"></view>
      <view class="right">
        本产品金适用于签订借条,双方借款凭证请自保存发生纠纷是可作为线索提交至仲裁处
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {}
  },
  onLoad() {},
  methods: {}
}
</script>

<style lang="scss" scoped>
@function rpx($num) {
  @return $num + rpx;
}

.selects {
  font-size: rpx(30);
}

.title {
  font-size: rpx(46);
  margin: rpx(60) 0;
  padding-left: rpx(30);
}

.options {
  .opt {
    width: rpx(678);
    height: rpx(192);
    border-radius: rpx(20);
    background-color: #fce0d4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: rpx(40) auto;
    padding: rpx(30);
    &.out {
      margin-top: rpx(100);
    }

    .left {
      .top {
        font-size: rpx(46);
        margin-bottom: rpx(20);
      }

      .bottom-btn {
        width: rpx(211);
        height: rpx(44);
        border-radius: rpx(20);
        background: #ff8d1a;
        text-align: center;
        color: #fff;
        line-height: rpx(44);

        &.second {
          background-color: #2a82e4;
        }
      }
    }

    .right-icon {
      width: rpx(83);
      height: rpx(83);
      background: url('../../static/images/selects/1.png');
      background-size: 100% 100%;
      &.out {
        background: url('../../static/images/selects/2.png');
        background-size: 100% 100%;
      }
    }
  }
}
.warnning {
  display: flex;
  color: #9c9c9c;
  align-items: center;
  padding: 0 rpx(30);
  position: fixed;
  bottom: rpx(100);
  .left {
    width: rpx(40);
    height: rpx(40);
    background: url('../../static/images/selects/warnning.png') no-repeat;
    background-size: contain;
    margin-right: rpx(20);
  }
}
</style>
